<!DOCTYPE html>
<html>

<head>
    <link rel="shortcut icon" href="http://likexia.gitee.io/tools/lib/img/h5.png" type="image/x-icon">
    <meta charset="utf-8">
    <!--自动刷新，1s=1-->
    <!--<META http-equiv="Refresh" content="3">-->
    <!--<meta http-equiv="X-UA-Compatible" content="IE=7" />-->
    <meta http-equiv="X-UA-Compatible" cotent="IE=edge,chrome=1" />
    <!--禁止缓存-测试时用-->
    <meta http-equiv="expires" content="0">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <!--禁止缓存-测试时用-->
    <!--禁止禁止识别电话号码和邮件-->
    <meta name="format-detection" content="telephone=no, email=no" />
    <!--禁止禁止识别电话号码和邮件-->
    <!--x5内核浏览器包括：QQ浏览器，qq,微信内置的浏览器（ 竖屏显示、以及全屏显示）-->
    <meta name="x5-orientation" content="portrait" />
    <meta name="x5-fullscreen" content="true" />
    <!--x5内核浏览器包括：QQ浏览器，qq,微信内置的浏览器（ 竖屏显示、以及全屏显示）-->
    <!--UC浏览器竖屏显示和全屏显示-->
    <meta name="screen-orientation" content="portrait">
    <meta name="full-screen" content="yes">
    <!--UC浏览器竖屏显示和全屏显示-->
    <meta name="viewport"
        content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <link rel="shortcut icon" href="http://likexia.gitee.io/tools/lib/img/h5.png" type="image/x-icon">
    <link rel="stylesheet" href="../muban/css/style.css">
    <script src="../lib/js/flexible.min.js"></script>
    <script src="js/scss-to-css.js"></script>
    <title>图片尺寸按比例缩放计算器</title>
</head>

<body>
    <div class="container">
        
<div class="panel-body">
  <h3>SCSS 在线编译工具</h3>
  <div></div>
  <div class="btn-group" role="group" aria-label="...">
    <button type="button" class="btn btn-primary" onclick="scss2css();">
      SCSS => CSS 
    </button>
    <button type="button" class="btn btn-primary" onclick="CSS('packAdv');">
      完全压缩
    </button>
    <button type="button" class="btn btn-primary" onclick="CSS('pack');">
      普通压缩
    </button>
    <button type="button" class="btn btn-primary" onclick="CSS('format');">
      格式化
    </button>
    <button type="button" class="btn btn-danger" onclick="Empty();">
      清空结果
    </button>
  </div>
  <textarea id="content" name="RawJson" class="json_input" rows="16" style="width: 100%;margin-top:10px;"
  spellcheck="false" placeholder="请输入 SCSS 或 CSS 代码"></textarea>
</div>
    </div>
    <script src="../lib/js/jquery.min.js"></script>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <script language="javascript">
        $('#doZoom').click(function () {
            var beforWidth = $('.beforWidth').val();
            var beforHeight = $('.beforHeight').val();
            var afterWidth = $('.afterWidth').val();
            var afterHeight = $('.afterHeight').val();
            var resultWidth = 0;
            var resultHeight = 0;
            var mult = 0
            if (beforWidth == ''){
                alert('请输入原始图片的宽度');
                return
            }else if (beforHeight == '') {
                alert('请输入原始图片高度');
                return
            }
            if(afterWidth == '' && afterHeight == ''){
                alert('缩放后的宽高必须填一个！');
                return
            }
            if (afterHeight != '' && afterWidth == '') {
                mult = beforHeight / afterHeight;
                console.log(mult)
                resultWidth = beforWidth / mult;
                $('.afterWidth').val(Math.round(resultWidth));
            } else if (afterWidth != '' || afterHeight == '') {
                mult = beforWidth / afterWidth;
                console.log(mult)
                resultHeight = beforHeight / mult;
                $('.afterHeight').val(Math.round(resultHeight));
            } else {
                alert('缩放后的宽高只能填一个！')
            }
        });
    </script>

</body>

</html>